<template>
    <div style="width: 100%; height: 100%" ref="elEcharts" />
  </template>

  <script setup >
  import { shallowRef, onMounted, watch } from "vue"
  import { useEcharts,  } from "./useEcharts"
  
  
  const props = defineProps({options:{}})
//   const themeStore = useThemeStore()
  const elEcharts = shallowRef()
  const currentOptions = shallowRef(props.options)
  const { setOptions, initCharts } = useEcharts(elEcharts, currentOptions.value)
  
  watch(
    () => props.options,
    (nVal) => {
      let targetOptions  = {}
    //   if (themeStore.currentColorArray && themeStore.currentColorArray.length > 0) {
    //     targetOptions = { ...nVal }
    //     targetOptions.color = themeStore.currentColorArray
    //   } else {
    //     targetOptions = { ...nVal }
    //   }
      targetOptions = { ...nVal }
      setOptions(targetOptions)
    }
  )
  
  onMounted(() => {
    initCharts()
  })
  </script>